<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户统计表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-confirm.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-confirm.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/layui.all.js}"></script>
    <script type="application/javascript" th:src="@{/js/layui.js}"></script>
    <script>
        var change;
        $(document).ready(function () {
            //改变页数
            change=function(val){
                str='#size'+val
                pageSize= $(str).val()
                username=$("#username").val()
                email=$("#email").val()
                window.location.href='/admin/toUser?pageSize='+pageSize+"&username="+username+"&email="+email
            }
            $("#download").click(function () {
                var set = new Array();
                $('table tr').each(function() {
                    var row = new Array();

                    $(this).find('td').each(function() {
                            row.push($(this).text());
                    });
                    set.push(row);
                });
                var vo=new Array()
                var  temp=new Array()
                for(var i=1;i<set.length-1;i++){
                    temp=[]
                    for(var j=2;j<set[1].length;j++){
                        temp.push(set[i][j])
                    }
                    vo.push(temp)
                }

                var voo=[]
                for(let i=0;i<vo.length;i++){
                    obj={}
                    for (let j=0;j<vo[0].length;j++){
                        obj["id"]=vo[i][0]
                        obj["account"]=vo[i][1]
                        obj["email"]=vo[i][2]
                        obj["regTime"]=vo[i][3]
                        obj["videoNum"]=vo[i][4]
                        obj["favorNum"]=vo[i][5]
                        obj["score"]=vo[i][6]
                        if (vo[i][7]==="禁用"){
                            obj["status"]=true
                        }else {
                            obj["status"]=false
                        }

                    }
                    voo.push(obj)
                }
                var url = "/admin/downloadUser";
                var xhr = new XMLHttpRequest();
                xhr.open('POST', url, true);//get请求，请求地址，是否异步
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.send(JSON.stringify(voo));
                xhr.responseType = "blob";    // 返回类型blob
                xhr.onload = function () {// 请求完成处理函数
                    if (this.status === 200) {
                        var blob = this.response;// 获取返回值
                        var a = document.createElement('a');
                        a.download = '用户统计.xlsx';
                        a.href=window.URL.createObjectURL(blob);
                        a.click();
                    }
                };
// 发送ajax请求
                //xhr.send();

            })
            $("#reset").click(function () {
                window.location.href="/category/tolist"
            })
        })
    </script>
</head>
<body>

<!--<form method="post" action="">-->
<div class="panel admin-panel">
    <div class="panel-head">
        <strong class="icon-reorder"> 视频列表</strong>
    </div>
    <div class="padding border-bottom">
        <form method="get" action="/admin/toUser">
            <input type="hidden" name="currentPage" th:value="${usersPage.pageNum}" />
            <input type="hidden" name="pageSize" th:value="${usersPage.pageSize}" />
            <ul class="search" style="padding-left:10px;">
                <li>用户名：<input type="text"
                               name="username" id="username" class="input" th:value="${queryCondition}==null?'':${queryCondition.username}"
                               style="width:150px; line-height:17px;display:inline-block" />
                </li>

                <li>用邮箱：<input type="text"
                               name="email" id="email" class="input" th:value="${queryCondition}==null?'':${queryCondition.email}"
                               style="width:150px; line-height:17px;display:inline-block" />
                </li>
                <li><button type="submit" class="button border-main icon-search">搜索</button></li>
                <li><button type="button" id="download" class="button border-main icon-download">下载到excel</button></li>
            </ul>
        </form>
    </div>
    <table class="table table-hover text-center">
        <tr>
            <th>序号</th>
            <th>头像</th>
            <th>id号</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>注册时间</th>
            <th>发布视频个数</th>
            <th>收藏视频个数</th>
            <th>积分</th>
            <th>是否禁用</th>
        </tr>
        <!--            xxx.?.list list为空就不进入循环-->
        <tr th:if="${not #lists.isEmpty(usersPage)}" th:each="user,index:${usersPage?.list}">
            <td th:text="${index.count}"></td>
            <td>  <div class="BU-Component-Header-Avatar__image"
                       th:style="'display: inline-block; width: 44px; height: 44px; border-radius: 22px; background-size: 100%; background-image: url('+${user?.avatar}+'); cursor: pointer'">
        </div></td>
            <td th:text="${user?.id}"></td>
            <td th:text="${user?.account}"></td>
            <td th:text="${user.email}==null?'':${user.email}"></td>
            <td th:text="${#dates.format(user?.regTime,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${user?.videoNum}"></td>
            <td th:text="${user?.favorNum}"></td>
            <td th:text="${user?.score}"></td>
            <td th:text="${user?.status}?'禁用':'未禁用'"></td>
        </tr>
        <tr >
            <td colspan="8" style="text-align: center"  th:if="${#lists.isEmpty(usersPage.list)}">数据为空</td>
        </tr>

    </table>
</div>
</form>
<nav style="text-align: center" aria-label="Page navigation">
    <ul class="pagination">
        <li th:class="${usersPage.pageNum}==1?'previous disabled':''" >
            <a th:href="@{/admin/toUser(currentPage=${usersPage.pageNum}-1,pageSize=${usersPage.pageSize})}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li th:class="${usersPage.pageNum==num?'active':''}" th:each="num:${#numbers.sequence(1,usersPage.pages)}"><a th:href="@{/admin/toUser(currentPage=${num},pageSize=${usersPage.pageSize},username=${queryCondition.username},email=${queryCondition.email})}" th:text="${num}" ></a></li>
        <li th:class="${usersPage.pages}==${usersPage.pageNum}?'previous disabled':''">
            <a th:href="@{/admin/toUser(currentPage=${usersPage.pageNum}+1,pageSize=${usersPage.pageSize})}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>


    </ul>

</nav>
<div style="text-align: center">
    每页大小:
    <select  onchange="change(this.options[this.selectedIndex].value)">
        <option  th:each="num:${#numbers.sequence(1,5)}" th:id="'size'+${num}" th:value="${num}" th:selected="${num}==${usersPage.pageSize}?'true':'false'" th:text="${num}"></option>
    </select>


</div>

</body>
</html>